import "./index.less"
import React, { useEffect, useState } from 'react'
import { useLocation } from "react-router-dom"
import { getPraticeListApi } from "@/api"
import Choice from "./components/Choice"
import Fill from "./components/Fill"
import AlignHorizontalLeftIcon from '@mui/icons-material/AlignHorizontalLeft';
import { useToast } from "@/hooks/toast"
import { Swiper, SwiperSlide } from 'swiper/react'
import "swiper/swiper.min.css"

const ChoiceType = ['one', 'many', 'check']

export default function Practice() {
    const toast = useToast()
    const { state } = useLocation()
    // console.log(state);
    const [list, setList] = useState<IPracticeItem[]>([])
    const params = state as IPracticeParams;
    useEffect(() => {
        getPraticeListApi(params).then(res => {
            if (res.errCode === 0) {
                setList(res.data)
            }
        })
    }, [])

    const [curIndex, setIndex] = useState(0)
    // 移动端没有mouse事件，只有touch事件
    // 在开始触摸的时候，记录手指的位置
    // let startX = 0;
    // const startFn = (e: React.TouchEvent<HTMLDivElement>) => {
    //     startX = e.touches[0].clientX
    // }
    // // 在触摸结束的时候， 对比开始和结束的位置，如果 开始 < 结束，向右
    // const endFn = (e: React.TouchEvent<HTMLDivElement>) => {
    //     let endX = e.changedTouches[0].clientX
    //     if (Math.abs(endX - startX) < 50) return
    //     if (startX < endX) {
    //         // 边界判断
    //         if (curIndex === 0) return toast('已经是第一题了', "warning")
    //         // 向右 ， 去往上一题
    //         setIndex(curIndex - 1)
    //     } else {
    //         if (curIndex === list.length - 1) return toast('已经是最后一题了', "warning")
    //         // 向左，去往下一题
    //         setIndex(curIndex + 1)
    //     }
    // }

    return (
        <div className="practice">
            <div className="top">
                <div className="left">
                    <AlignHorizontalLeftIcon />
                    <span>{curIndex + 1} / {list.length}</span>
                </div>
            </div>
            {/* <div className="wraper" onTouchStart={startFn} onTouchEnd={endFn}>
                <div className="list" style={{ width: list.length * 100 + 'vw', transform: `translate(${-100 * curIndex}vw)` }}>
                    {
                        // list.map(item => {
                        //     // 题目的 questionType 如果是 one ,many , check 之一，就是选择题
                        //     if (ChoiceType.includes(item.questionType)) {
                        //         // 都是选择题
                        //         return <Choice />
                        //     } else {
                        //         return <Fill />
                        //     }
                        // })

                        // 简化
                        list.map(item => ChoiceType.includes(item.questionType) ? <Choice data={item} key={item.id} /> : <Fill data={item} key={item.id} />)
                    }
                </div>
            </div> */}
            <Swiper onSlideChange={(swiper) => setIndex(swiper.activeIndex)}>
                {
                    list.map(item => <SwiperSlide key={item.id}>
                        {
                            ChoiceType.includes(item.questionType) ? <Choice data={item} /> : <Fill data={item} />
                        }
                    </SwiperSlide>)
                }
            </Swiper>
        </div>
    )
}
